<template>
    <div id="footers">
        <ol>
        	<router-link tag="li" :to="item.href" active-class="active" v-for="item in ulrList" :key="item.id">
        		<i class="iconfont sz36" :class="item.className"></i>
				<a>{{item.name}}</a>
        	</router-link> 
        </ol> 
    </div>
</template>

<script>
export default {
  name:"footers",
  data(){
      return{
		ulrList:[
		{
			name:"主页",
			href:"/clientele/home",
			className:'icon-zhuye' 
		},
		{
			name:"我的",
			href:"/clientele/mycenter",
			className:'icon-gerenzhongxinzhuyegerenziliao' 
		}
		]
      }
  }
}
</script>

<style scoped>
	 #footers{
	 	width: 100%;
	 	height: 1.3333rem;
	 	position: absolute;
	 	z-index: 100;
	 	bottom: 0;
	 	left: 0;
	 	background-color:#fff;
	 	border-top:1px solid #CCCCCC; 
	 }
	 
	 #footers ol{
	 	 display: flex;
	 	 height: 100%;
	 }
	 #footers ol li{
	 	display: flex;
	 	flex: 1;
		flex-direction: column;
	    justify-content: center;
	    align-items: center;
		height: 1.3333333333rem;
	    color: #666;
	 } 
	#footers ol li a{
		font-size: 0.32rem;
		color: #666;
		font-weight: 700;
	}
	#footers ol li i{
		color:#999;
	}
	#footers ol li.active a{
		color: #6530e0;
	}
	#footers ol li.active i{
		color: #6530e0;
	}
</style>
